<template>
  <!--    @formatter:off -->
    <div class="editor-container">
    <el-form  size="small" :model="formData" label-width="100px">
        <el-form-item :span="24" label="条件通过">
            <el-switch v-model="formData.properties.con" active-text="是" inactive-text="否"> </el-switch>
        </el-form-item>
        <el-form-item :span="12" v-if="formData.properties.con"  label="条件说明">
        <el-input v-model="formData.properties.title" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item :span="12" v-if="formData.properties.con"  label="排序">
        <el-input v-model="formData.properties.order" style="width: 200px"></el-input>
        </el-form-item>
        <div v-if="formData.properties.con" style="padding: 0px 10px;">
                    <vxe-button icon="vxe-icon-square-plus" size="mini" @click="addcc()">新增条件组</vxe-button>
            <div v-for="(addCC,ai) in condition">
                <div>
                    并且条件组{{ai}}<vxe-button style="margin-left: 20px" size="mini" @click="deletear(ai)">删除条件组{{ai}}</vxe-button>
                    <vxe-button icon="vxe-icon-square-plus" size="mini" @click="oddcc(ai)">新增或条件</vxe-button>
                    <div style="margin-top: 5px;" v-for="(orCC,oi) in addCC " v-if="addCC.length>0">
                        <el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col style="display: contents;">
                                        <vxe-select v-model="orCC['type']" slot="prepend" placeholder="请选择类型" size="mini"  style="width: 110px">
                                            <vxe-option label="字段值" value="field"></vxe-option>
                                            <vxe-option label="上节点提交人" value="userid"></vxe-option>
                                            <vxe-option label="提交人部门" value="dept"></vxe-option>
                                            <vxe-option label="提交人角色" value="role"></vxe-option>
                                        </vxe-select>

                                    </el-col>
                                    <el-col  v-if="orCC['type']==='field'" :span="6" style="display: contents;" >
                                        <vxe-select v-model="orCC['field']"  placeholder="选择字段" size="mini"  style="width: 130px">
                                            <vxe-optgroup
                                                v-for="group in target.field"
                                                :key="group.tableID"
                                                :label="group.tableDispName">
                                                <vxe-option
                                                    v-for="item in group.Fields"
                                                    :key="item.fieldID"
                                                    :label="item.fieldDispName"
                                                    :value="item.fieldName">
                                                </vxe-option>

                                            </vxe-optgroup>
                                        </vxe-select>
                                    </el-col>
                                    <el-col style="display: contents;">
                                        <vxe-select v-model="orCC['operate']"  placeholder="比较方式" size="mini" style="width: 100px">
                                            <vxe-option label="等于" value="=="></vxe-option>
                                            <vxe-option label="不等于" value="!="></vxe-option>
                                            <vxe-option label="小于" value="<"></vxe-option>
                                            <vxe-option label="小于等于" value="<="></vxe-option>
                                            <vxe-option label="大于" value=">"></vxe-option>
                                            <vxe-option label="大于等于" value=">="></vxe-option>
                                            <vxe-option label="包含" value="%"></vxe-option>
                                            <vxe-option label="不包含" value="!%"></vxe-option>
                                        </vxe-select>
                                    </el-col>
                                    <el-col :span="8" style="display: contents;">
                                        <vxe-select v-if="orCC['type']==='role'"  v-model="orCC['role']" size="mini" multiple placeholder="请选择角色">
                                            <vxe-option
                                                v-for="item in  target.role"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </vxe-option>
                                        </vxe-select>
                                        <vxe-select v-if="orCC['type']==='dept'"  v-model="orCC['dept']" size="mini" multiple placeholder="请选择部门">
                                            <vxe-option
                                                v-for="item in  target.role"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </vxe-option>
                                        </vxe-select>
                                        <vxe-select v-if="orCC['type']==='userid'"  v-model="orCC.value" size="mini" multiple placeholder="请选择">
                                            <vxe-option
                                                v-for="item in  target.user"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </vxe-option>
                                        </vxe-select>
                                        <vxe-input v-if="orCC['type']==='field'"  size="mini"  placeholder="请输入内容" style="width: 100px;" v-model="orCC.value" class="input-with-select">
                                        </vxe-input> <vxe-button size="mini" @click="deleteor(ai,oi)">删除</vxe-button>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>

                </div>

            </div>

        </div>

    </el-form>

    </div>
</template>

<script  >

import {defineComponent, onMounted, reactive, ref, toRefs, watch} from 'vue';
import XEUtils, {assign} from "xe-utils";
import {getUserList} from "/@/api/system/user";
import {getRoleList} from "/@/api/system/role";
// interface userTasks {
//     formData: {
//         properties:{
//             pass:boolean
//             title:string
//             order:number
//             condition:any
//         }
//     },
//     target: { user:any,role:any,post:any,manager:any,field:any }
//     tableData:[]
//     dialogFormVisible:boolean
//     orForm:[]
//
// }
export default defineComponent({
    name: 'edge',
    props: {
        info: Object,
        modelValue: Object,
        targetSource: Object,
    },
    setup(props, { emit }) {
        const andTable=ref()
        const state = reactive({
            formData: {properties: {title: '',con:false, order: 1, condition:[]}},
            target: {user: [], role: [], post: [], manager: [], field: []},
            tableData: [],
            dialogFormVisible:false,
            condition:[]
        });
        onMounted(()=>{
            state.formData=XEUtils.assign(state.formData,props.modelValue||{})
            state.target=XEUtils.assign({},props.targetSource||{})
            state.condition=state.formData.properties.condition||[]
            console.log(state.target.field)
        })

        watch(
            () => props.modelValue,
            (newValue, oldValue) => {
                state.formData=assign(state.formData,props.modelValue)
                state.condition=props.modelValue.properties.condition||[]
            }
        )
        watch(
            () => state.target,
            (newValue, oldValue) => {
                emit('update:targetSource', state.target);
            }
        )
        watch(
            () =>  state.formData.properties,
            (newValue, oldValue) => {
                state.formData.properties.condition=state.condition
                emit('update:modelValue', state.formData);
            }
        );
        const addcc = () => {
            const dd=[{
                type: '',
                field: null,
                value: null,
                operate: null
            }]
            state.condition.push(dd)
        }
        const oddcc = (i) => {
            state.condition[i].push({
                type: '',
                field: null,
                value: null,
                operate: null
            })
        }
        const deletear = (i) => {
            state.condition.shift(i)
        }
        const deleteor = (i,ii) => {
            state.condition[i].shift(ii)
        }
        return {
            ...toRefs(state),addcc,deleteor,oddcc,deletear
        };
    },
});
</script>

<style scoped>

</style>